<template>
  <div class="app-container">
    <!--搜索框  -->
    <el-form :inline="true">
        <el-form-item label="">
            <el-select v-model="searchMap.data.typeId"  clearable  placeholder="房间类型">
                <el-option label="单人间" value="1"> </el-option>
                <el-option label="双人间" value="2"> </el-option>
                <el-option label="情侣套房" value="3"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="">
            <el-select v-model="searchMap.data.roomStatus"  clearable  placeholder="房间状态">
                <el-option label="可预订" value="0"> </el-option>
                <el-option label="已预订" value="1"> </el-option>
                <el-option label="已下架" value="2"> </el-option>
                <el-option label="审核中" value="3"> </el-option>
                <el-option label="未通过审核" value="4"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item><el-input v-model="searchMap.data.roomName" placeholder="请输入房间名称"></el-input></el-form-item>
        <el-form-item><el-button type="primary" @click="search()">查询</el-button></el-form-item>
    </el-form>

    <!-- 房间列表 -->
    <el-table :data="roomList" stripe style="width: 100%" border>
      <el-table-column prop="roomId" label="房间ID"  v-if="false"> </el-table-column>
      <el-table-column prop="roomName" label="房间名称" ></el-table-column>
      <el-table-column prop="roomStatus" label="房间状态" :formatter="statusFormat"></el-table-column>
      <el-table-column prop="typeId" label="房间类型" :formatter="typeFormat" > </el-table-column>
      <el-table-column prop="pic" label="房间图片"  align="center">
        <template slot-scope="scope">
          <div>
            <el-popover placement="left" width="280" trigger="hover">
                <img :src="scope.row.pic==null?'':scope.row.pic" height="210px" style="line-height=210px"/>
                <img slot="reference" :src="scope.row.pic==null?'':scope.row.pic" style="max-height: 50px">
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="房间价格" ></el-table-column>
      <el-table-column prop="roomDescribe" label="房间描述" ></el-table-column>
      <el-table-column prop="roomAderss" label="具体住址"></el-table-column>

      <!-- 操作行 -->
      <el-table-column fixed="right" label="审核">
        <template slot-scope="scope">
          <div><el-button @click="openForm(scope.row)" type="primary" size="small">审核</el-button></div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.searchMap.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>
    <!-- 审核弹出框 -->
    <el-dialog title="房间审核" center :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :modal-append-to-body='true'>
      <el-form :model="entity" ref="tempForm">
        <el-form-item prop="roomId" label="房间ID" label-width="100px">
          <el-input v-model="entity.roomId" auto-complete="off" label-width="100px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="roomName" label="房间名称" label-width="100px" >
          <el-input v-model="entity.roomName" auto-complete="off" label-width="100px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="roomStatus" label="房间状态" label-width="100px">
            <el-select v-model="entity.roomStatus" placeholder="房间状态" :disabled="true">
                <el-option label="可预订" value="0"> </el-option>
                <el-option label="已预订" value="1"> </el-option>
                <el-option label="已下架" value="2"> </el-option>
                <el-option label="审核中" value="3"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="typeId" label="房间类型" label-width="100px">
          <el-select v-model="entity.typeId" placeholder="房间类型" :disabled="true">
                <el-option label="单人间" value="1"> </el-option>
                <el-option label="双人间" value="2"> </el-option>
                <el-option label="情侣套房" value="3"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="pic" label="房间图片" label-width="100px">
            <div class="demo-image__preview">
                <el-image style="width: 150px;" :src="entity.pic" :preview-src-list="srcList" :z-index="9999"></el-image>
            </div>
        </el-form-item>
        <el-form-item prop="price" label="房间价格" label-width="100px">
          <el-input v-model="entity.price" label-width="100px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="roomDescribe" label="房间名称" label-width="100px">
          <el-input type="textarea" v-model="entity.roomDescribe" label-width="100px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="roomAderss" label="房间名称" label-width="100px">
          <el-input type="textarea" v-model="entity.roomAderss" label-width="100px" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="entity.roomStatus>=3 ? true : false" type="primary" @click="reviewRoom()">可通过</el-button>
        <el-button @click="setNoPass()">不通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {search,review,noPass} from "@/api/homeReview";
export default {
  data() {
    return {
      dialogVisible: false,
      brands: [],
      roomList: [],
      total: 0,
      entity: {},
      srcList:[],
      updateEntity: {},
      searchMap: {
        //分页相关数据
        data: {},
        limit: 5,
        page: 1,
      },
    };
  },
  methods: {
    search() {
      //分页加条件查询
      var _this = this;
      search(this.searchMap).then((res) => {
        _this.roomList = res.data;
        _this.roomList.forEach(d=>{
          d.roomStatus = d.roomStatus.toString();
        });
        _this.total = res.total;
      });
    },
    openForm(row) {
      this.dialogVisible = true;
      this.srcList=[];
      this.entity = {};
      this.entity = row;
      this.srcList.push(this.entity.pic);
      console.log(this.srcList);
      this.entity.roomStatus = this.entity.roomStatus.toString();
      this.entity.typeId = this.entity.typeId.toString();
    },
    closeForm() {
      this.dialogVisible = false;
    },
    //审核通过
    reviewRoom() {
      console.log(this.entity);
      review(this.entity).then((res) => {
        if (res.success) {
          // 审核通过
          this.search();
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
        this.dialogVisible = false;
      });
    },
    setNoPass(){
      noPass(this.entity).then((res) => {
        if (res.success) {
          // 审核通过
          this.search();
          this.$message({
            message: res.message,
            type: "success",
          });
        } 
        this.search();
        this.dialogVisible = false;
      });
    },
    handleSizeChange(size) {
      //每页显示条数改变
      this.searchMap.limit = size;
      this.search();
    },
    handleCurrentChange(currentPage) {
      //当前页发生改变
      this.searchMap.page = currentPage;
       this.search();
    },
    typeFormat(row, column) {
      //返回房间类型
      if (row.typeId == 1) {
        return "单人间";
      } 
      if(row.typeId == 2) {
        return "双人间";
      }
      if(row.typeId == 3) {
        return "情侣套房";
      }
    },
    statusFormat(row, column){
       //返回房间当前状态0可预订 1已预定 2下架 3审核中
      if (row.roomStatus == 0) {
        return "可预订";
      } 
      if(row.roomStatus == 1) {
        return "已预定";
      }
      if(row.roomStatus == 2) {
        return "已下架";
      }
      if(row.roomStatus == 3) {
        return "审核中";
      }
      if(row.roomStatus == 4){
        return "未通过审核";
      }
    }
  },
  created() {
    //页面加载完
    this.search();
  },
};
</script>